<template>
  <!-- 商品参数 -->
  <div v-if="Object.keys(goodsParams).length !== 0" class="goods-params">
    <table class="size-info">
      <tbody v-for="(table,index) in goodsParams.sizeInfo" :key="index">
        <tr v-for="(tr,inder) in table" :key="inder">
          <td v-for="(td,inded) in tr" :key="inded">{{ td }}</td>
        </tr>
      </tbody>
    </table>

    <table class="product">
      <tbody>
        <tr v-for="(item,index) in goodsParams.productInfo" :key="index">
          <td class="key">{{ item.key }}</td>
          <td class="value">{{ item.value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "goodsParams",
  props: {
    goodsParams: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
.goods-params {
  padding: 10px;
  border-bottom: 10px solid #f2f5f8;
  .size-info {
    width: 100%;
    border-collapse: collapse;
    tbody {
      tr {
        height: 32px;
        border-bottom: 1px solid #dedede;
        font-size: 13px;
        td {
        }
      }
    }
  }
  .product {
    width: 100%;
    border-collapse: collapse;
    tr {
      height: 32px;
      border-bottom: 1px solid #dedede;
      font-size: 13px;
    }
    .key {
      width: 95px;
    }
    .value {
      color: var(--color-high-text);
    }
  }
}
</style>